import React, { memo, useEffect, useState } from "react";
import { View, Text, Button } from '@tarojs/components'
import { Icon, Image, Cell, CellGroup, Empty } from '@antmjs/vantui'
import { InviteHeader, MyIcon, InviteQrCode, InvitePoster } from "@/components"
import Taro, { useShareAppMessage } from '@tarojs/taro';
import { getCode, queryInviteFriendsList } from "@/services"
import { formatDate } from "@/utils/fomatter";
import './index.scss'


function InviteFriends() {
  const steps = [{ stepName: '复制链接', bgc: 'https://static.hzddyy.com/taiyi/tt/step1.png' }, { stepName: '发送给好友', bgc: 'https://static.hzddyy.com/taiyi/tt/step2.png' }, { stepName: '好友完成注册', bgc: 'https://static.hzddyy.com/taiyi/tt/step3.png' }]

  const [inviteMsg, setInviteMsg] = useState({})
  const [inviteList, setInviteList] = useState([])
  const [showQrCode, setShowQrCode] = useState(false)
  const [showPoster, setShowPoster] = useState(false)
  useEffect(() => {
    let result1 = getCode()
    let result2 = queryInviteFriendsList()
    Promise.all([result1, result2]).then(([res1, res2]) => {
      res1.data && setInviteMsg(res1.data)
      res2.data?.inviteList && setInviteList(res2.data.inviteList)
    })

  }, [])
  useShareAppMessage(() => {
    return {
      title: '快来和我一起体验一道投吧！',
      imageUrl: 'https://static.hzddyy.com/taiyi/tt/share-img.png',
      path: '/mineDetail/webView/index?src=' + `${encodeURIComponent(inviteMsg?.inviteUrl)}`
    }


  })

  const clickCopy = (data) => {
    Taro.setClipboardData({
      data
    })
  }

  return (
    <>
      <InviteHeader />
      <View className='invite-body'>
        <View className='text1 black'>邀请码/邀请链接</View>
        <View className='step-box'>
          {
            steps.map((step, index) => {
              return (
                <View key={step.stepName + index} className='step-item' style={{ backgroundImage: `url(${step.bgc})` }} >
                  <View>{index + 1}</View>
                  <Text className='black'>{step.stepName}</Text>
                </View>
              )
            })
          }
        </View>
        <View className='invite-code'>
          <View className='invite-code-item'>
            <View className='black text4 front'><Text>邀请码</Text><Text className='text5 black5'>{inviteMsg?.inviteCode}</Text></View>
            <View className='text5 back' onClick={() => clickCopy(inviteMsg?.inviteCode)}>
              <MyIcon iconName='icon-copy-ic' />
              复制
            </View>

          </View>
          <View className='invite-code-item'>
            <View className='black text4 front'><Text>链接</Text><Text className='text5 black5'>{inviteMsg?.inviteUrl}</Text></View>
            <View className='text5 back' onTap={() => clickCopy(inviteMsg?.inviteUrl)}>
              <MyIcon iconName='icon-copy-ic' />
              复制
            </View>
          </View>
        </View>
        <Button className='invite-btn' openType='share'> <Icon name='wechat' size='20px' />微信邀请好友</Button>
        <View className='invite-share' >
          <View className='share-item' onTap={() => setShowQrCode(true)}>
            <Image width='24px' height='24px' src={require('@/assets/icons/qrcode.png')} />
            <Text>面对面扫码</Text>
          </View>
          <View className='share-item' onTap={() => setShowPoster(true)}>
            <Image width='24px' height='24px' src={require('@/assets/icons/img.png')} />
            <Text>生成海报</Text>
          </View>
        </View>

      </View>
      <View className='placeholder'></View>
      <View className='invite-list'>

        <Cell title='我的邀请' value='全部'
          titleStyle={{
            fontWeight: 600,
            fontSize: '18px',
            color: '#263446'
          }}
          border={false}
          renderRightIcon={
            <Image width='14px' height='14px' src={require("@/assets/icons/arrow-right3.png")} />
          }
          linkType='navigateTo'
          url={"/mineDetail/inviteDetail/index?data=" + `${encodeURIComponent(JSON.stringify(inviteList))}`}
        />
        <View className='my-cell'>
          <Text>UID</Text>
          <Text>时间</Text>
        </View>
        {
          inviteList.length ?
            <CellGroup border={false}>
              {
                inviteList.slice(0, 5).map((detail) => {
                  return (
                    <Cell key={detail?.invitedUserId}
                      title={detail?.invitedUserId}
                      value={formatDate(detail?.created, null, 'YYYY/MM/DD')}
                      border={false}
                      titleStyle={{
                        fontWeight: 400,
                        fontSize: '16px',
                        color: '#263446'
                      }}
                    />
                  )
                })

              }
            </CellGroup>
            :
            <Empty
              image='https://static.hzddyy.com/taiyi/tt/public_placeholder_nodata.png'
              description='暂无数据'
            />
        }




      </View>
      <InviteQrCode inviteUrl={inviteMsg?.inviteUrl} show={showQrCode} close={() => setShowQrCode(false)} />
      <InvitePoster inviteUrl={inviteMsg?.inviteUrl} show={showPoster} close={() => setShowPoster(false)} />
    </>


  )
}

export default memo(InviteFriends)
